<template>
  <view class="sent-off-card f fd-col">
    <view class="mail-detail f ai-c">
      <view class="mail-info f w0 f2 ai-c jc-c fd-col">
        <text class="fw-600 to-1">{{ sentOffCardData.mailUserName }}</text>
        <text class="fs-20 mt20 color999">{{
          sentOffCardData.mailUserPhone
        }}</text>
        <text class="fs-20 mt20 to-2 color999">{{
          sentOffCardData.mailAddress
        }}</text>
      </view>

      <view class="f f1 fd-col ai-c jc-c">
        <template v-if="sentOffCardData.reason === 0">
          <image
            src="/static/image/mail/mail.png"
            mode="widthFix"
            style="width: 60rpx"
          ></image>
        </template>
        <template v-else>
          <image
            src="/static/image/mail/goods_rejected.png"
            mode="widthFix"
            style="width: 40rpx"
          ></image>
        </template>
        <image
          src="/static/image/mail/mail_check_icon.png"
          mode="widthFix"
          style="width: 80rpx"
        ></image>
      </view>
      <view class="pickup-info f w0 jc-c ai-c f2 fd-col">
        <template v-if="sentOffCardData.reason === 0">
          <text class="fw-600 to-1">{{ sentOffCardData.pickUpUserName }}</text>
          <text class="fs-20 mt20 color999">{{
            sentOffCardData.pickUpUserPhone
          }}</text>
          <text class="fs-20 mt20 to-2 color999">{{
            sentOffCardData.pickUpAddress
          }}</text>
        </template>
        <template v-else>
          <text class="fw-600 to-1">{{ sentOffCardData.enterpriseName }}</text>
          <text class="fs-20 mt20 color999">{{
            sentOffCardData.enterprisePhone
          }}</text>
          <text class="fs-20 mt20 to-2 color999">{{
            sentOffCardData.enterpriseAddress
          }}</text>
        </template>
      </view>
    </view>
    <view class="mail-status f f1 jc-sb ai-c mt20 w100p">
      <view class="f1"
        ><text class="fw-600 mr10 fs-20">下单时间:</text
        ><text class="fs-20">{{ sentOffCardData.placeOrderTime }}</text></view
      >
      <view class="f f1 ai-c jc-fe">
        <template v-if="sentOffCardData.mailStatus === 2">
          <image
            src="/static/image/mail/trolley-logistics.png"
            mode="widthFix"
            style="width: 50rpx"
          ></image>
          <text class="fw-600 ml10 fs-20">包裹运送中~</text>
        </template>
        <template v-else-if="sentOffCardData.mailStatus === 3">
          <image
            src="/static/image/mail/mail-box.png"
            mode="widthFix"
            style="width: 50rpx"
          ></image>
          <text class="fw-600 ml10 fs-20">包裹已到达收件点~</text>
        </template>
        <template v-else>
          <image
            src="/static/image/mail/courier.png"
            mode="widthFix"
            style="width: 50rpx"
          ></image>
          <text class="fw-600 ml10 fs-20">快递员正在赶来装包裹中~</text>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "sent-off-card",
  props: {
    sentOffCardData: {
      type: Object,
      default: () => ({}),
    },
  },
  setup() {
    return {};
  },
};
</script>
<style lang='scss' scoped>
.sent-off-card {
  margin-bottom: 40rpx;
  padding: 20rpx;
  width: 100%;
  height: 42 0rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  box-shadow: 2rpx 4rpx 8rpx #ddd;
  background-color: #fff;
  .mail-detail {
    width: 100%;
    height: 300rpx;
    background-color: #f4f7ff;
    border-radius: 20rpx;
  }
  .mail-status {
    height: 0rpx;
  }
}
</style>